<template>
  <div class="soon">
    <div class="time">7月16日</div>
    <div class="soon_ul">
      <ul class="soon_li">
        <li class="ul_li" v-for="item in state.list" :key="item.id">
          <div class="li_img">
            <img :src="item.Imgurl" alt="" />
          </div>
          <div class="li_title">
            <h4>{{ item.title }}</h4>
            <span>更新</span>
            <p>{{ item.synopsis }}</p>
          </div>
        </li>
      </ul>
      <div class="time">今天</div>
      <ul class="soon_list">
        <li class="list" v-for="(item, index) in state.list" :key="index">
          <p class="list_p">
            <span>更新</span>
            <i>12:00</i>
          </p>
          <img :src="item.Imgurl" alt="" />
          <div class="list_h4">
            <h4>{{ item.title }}</h4>
            <span> 获取 </span>
          </div>
          <p class="list_title">
            {{ item.synopsis }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      list: [],
      todaylist: [],
    });
    axios
      .get("http://121.199.14.205:3000/api/list", {
        params: {
          pageSize: 7,
          currentPage: 1,
        },
      })
      .then(function (response) {
        state.list = response.data.list;
      });
    return {
      state,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/var.less";
.soon {
  // position: relative;
  .time {
    padding-left: 15px;
    //   // width: 100%;
    //   // height: 37px;
    //   // background-color: #ffffff;
    //   // padding: 10px 0px;
    //   // position: sticky;
    //   // top: 1200px;
    //   // left: 0px;
    //   // z-index: 100;
  }
  .soon_ul {
    .ul_li {
      display: flex;
      padding: 15px;
      .li_img {
        width: 40%;
        // height: 104px;
        img {
          width: 142px;
          height: 80px;
          border-radius: 5px;
        }
      }
      .li_title {
        width: 70%;
        font-size: 12px;
        h4 {
          font-size: 16px;
        }
        h4,
        p,
        span {
          padding: 10px;
        }
        p {
          width: 200px;
          .of();
          color: #868c92;
        }
        span {
          color: #14b8c7;
        }
      }
    }
    .soon_list {
      .list {
        width: 374px;
        height: 318px;
        padding: 15px 15px 0px 15px;
        .list_p {
          display: flex;
          span {
            display: block;
            text-indent: 10px;
            background-color: #ecfafb;
            width: 50px;
            height: 25px;
            font-size: 12px;
            line-height: 30px;
            border-top-right-radius: 32px;
            color: #15c5ce;
          }
          i {
            text-align: center;
            height: 25px;
            line-height: 30px;
            margin-left: 5px;
            font-size: 12px;
            color: #868c92;
          }
        }
        img {
          width: 100%;
          height: 215px;
          border-radius: 5px;
        }
        .list_h4 {
          display: flex;
          justify-content: space-between;
          padding: 3px 0px;
          h4 {
            font-size: 18px;
          }
          span {
            display: block;
            text-align: center;
            background-color: #ecfafb;
            width: 64px;
            height: 26px;
            font-size: 14px;
            line-height: 25px;
            border-radius: 28px;
            color: #15c5ce;
          }
        }
        .list_title {
          width: 250px;
          font-size: 14px;
          .of();
          color: #868c92;
        }
      }
    }
  }
}
</style>
